﻿@page "/circular-gauge/annotation"

@using Syncfusion.Blazor.CircularGauge

@inherits SampleBaseComponent;
 <!-- <div class="control-section">
        <SfCircularGauge ID="gauge1" @ref="@gaugeref">
            <CircularGaugeAxes>
                <CircularGaugeAxis Radius="90%" StartAngle="0" EndAngle="0" Minimum="0" Maximum="12">
                    <CircularGaugeAxisLabelStyle HiddenLabel="HiddenLabel.First" AutoAngle="false">
                        <CircularGaugeAxisLabelFont FontFamily="Roboto" Size="12px" FontWeight="Regular">
                        </CircularGaugeAxisLabelFont>
                    </CircularGaugeAxisLabelStyle>
                    <CircularGaugeAxisLineStyle Width="0">
                    </CircularGaugeAxisLineStyle>
                    <CircularGaugeAxisMajorTicks Width="2" Height="14" Interval="1">
                    </CircularGaugeAxisMajorTicks>
                    <CircularGaugeAxisMinorTicks Width="1" Height="4" Interval="0.2">
                    </CircularGaugeAxisMinorTicks>
                    <CircularGaugeRanges>
                        <CircularGaugeRange Start="0" End="3" Color="rgb(128,128,128)"></CircularGaugeRange>
                        <CircularGaugeRange Start="3" End="12" Color="rgb(192,192,192)"></CircularGaugeRange>
                    </CircularGaugeRanges>
                    <CircularGaugePointers>
                        <CircularGaugePointer PointerWidth="5" Radius="40%" Value="@value">
                            <CircularGaugePointerBorder Width="0"></CircularGaugePointerBorder>
                            <CircularGaugeCap Radius="0">
                                <CircularGaugeCapBorder Width="0"></CircularGaugeCapBorder>
                                <CircularGaugeNeedleTail Length="0%"></CircularGaugeNeedleTail>
                                <CircularGaugePointerAnimation Enable="true"></CircularGaugePointerAnimation>
                            </CircularGaugeCap>
                        </CircularGaugePointer>
                        <CircularGaugePointer PointerWidth="5" Radius="60%" Value="@value">
                            <CircularGaugePointerBorder Width="0"></CircularGaugePointerBorder>
                            <CircularGaugeCap Radius="0">
                                <CircularGaugeCapBorder Width="0"></CircularGaugeCapBorder>
                                <CircularGaugeNeedleTail Length="0%"></CircularGaugeNeedleTail>
                                <CircularGaugePointerAnimation Enable="true"></CircularGaugePointerAnimation>
                            </CircularGaugeCap>
                        </CircularGaugePointer>
                        <CircularGaugePointer PointerWidth="1" Radius="70%" Value="@value">
                            <CircularGaugePointerBorder Width="2"></CircularGaugePointerBorder>
                            <CircularGaugeCap Radius="4">
                                <CircularGaugeCapBorder Width="0"></CircularGaugeCapBorder>
                                <CircularGaugeNeedleTail Length="20%">
                                    <CircularGaugeNeedleTailBorder Width="2"></CircularGaugeNeedleTailBorder>
                                </CircularGaugeNeedleTail>
                                <CircularGaugePointerAnimation Enable="false" Duration="500"></CircularGaugePointerAnimation>
                            </CircularGaugeCap>
                        </CircularGaugePointer>
                    </CircularGaugePointers>
                    <CircularGaugeAnnotations>
                        <CircularGaugeAnnotation Angle="270" Radius="50%" ZIndex="1">

                            <ContentTemplate>
                                <div style="width:75px;height:75px;margin-left:-60px; margin-top:-50px">
                                    <SfCircularGauge Width="120px" Height="120px" @ref="@subGaugeref">
                                        <CircularGaugeAxes>
                                            <CircularGaugeAxis Radius="90%" StartAngle="0" EndAngle="0" Minimum="0" Maximum="12">
                                                <CircularGaugeAxisLabelStyle HiddenLabel="HiddenLabel.First" AutoAngle="false">
                                                    <CircularGaugeAxisLabelFont Size="0px">
                                                    </CircularGaugeAxisLabelFont>
                                                </CircularGaugeAxisLabelStyle>
                                                <CircularGaugeAxisLineStyle Width="0.1">
                                                </CircularGaugeAxisLineStyle>
                                                <CircularGaugeAxisMajorTicks Width="2" Height="14" Interval="1">
                                                </CircularGaugeAxisMajorTicks>
                                                <CircularGaugeAxisMinorTicks Width="1" Height="4" Interval="0.2">
                                                </CircularGaugeAxisMinorTicks>
                                                <CircularGaugeRanges>
                                                    <CircularGaugeRange Start="0" End="3" Color="rgb(128,128,128)"></CircularGaugeRange>
                                                    <CircularGaugeRange Start="3" End="12" Color="rgb(192,192,192)"></CircularGaugeRange>
                                                </CircularGaugeRanges>
                                                <CircularGaugePointers>
                                                    <CircularGaugePointer PointerWidth="1" Radius="70%" Value="@value">
                                                        <CircularGaugePointerBorder Width="2"></CircularGaugePointerBorder>
                                                        <CircularGaugeCap Radius="4">
                                                            <CircularGaugeCapBorder Width="0"></CircularGaugeCapBorder>
                                                            <CircularGaugeNeedleTail Length="20%">
                                                                <CircularGaugeNeedleTailBorder Width="2"></CircularGaugeNeedleTailBorder>
                                                            </CircularGaugeNeedleTail>
                                                            <CircularGaugePointerAnimation Enable="false" Duration="500"></CircularGaugePointerAnimation>
                                                        </CircularGaugeCap>
                                                    </CircularGaugePointer>
                                                </CircularGaugePointers>
                                                <CircularGaugeAnnotations>
                                                    <CircularGaugeAnnotation Angle="270" Radius="50%" ZIndex="1" Content="hello"></CircularGaugeAnnotation>
                                                    </CircularGaugeAnnotations>
                                            </CircularGaugeAxis>
                                        </CircularGaugeAxes>
                                    </SfCircularGauge>
                                </div>
                            </ContentTemplate>

                        </CircularGaugeAnnotation>
                        <CircularGaugeAnnotation Angle="180" Radius="50%" ZIndex="1">

                            <ContentTemplate>
                                <div style="width:75px;height:75px;margin-left:-60px;margin-top:-60px">
                                    <SfCircularGauge Width="120px" Height="120px" @ref="@subGauge2ref">
                                        <CircularGaugeAxes>
                                            <CircularGaugeAxis Radius="90%" StartAngle="0" EndAngle="0" Minimum="0" Maximum="12">
                                                <CircularGaugeAxisLabelStyle HiddenLabel="HiddenLabel.First" AutoAngle="false">
                                                    <CircularGaugeAxisLabelFont Size="0px">
                                                    </CircularGaugeAxisLabelFont>
                                                </CircularGaugeAxisLabelStyle>
                                                <CircularGaugeAxisLineStyle Width="0.1">
                                                </CircularGaugeAxisLineStyle>
                                                <CircularGaugeAxisMajorTicks Width="2" Height="14" Interval="1">
                                                </CircularGaugeAxisMajorTicks>
                                                <CircularGaugeAxisMinorTicks Width="1" Height="4" Interval="0.2">
                                                </CircularGaugeAxisMinorTicks>
                                                <CircularGaugeRanges>
                                                    <CircularGaugeRange Start="0" End="3" Color="rgb(128,128,128)"></CircularGaugeRange>
                                                    <CircularGaugeRange Start="3" End="12" Color="rgb(192,192,192)"></CircularGaugeRange>
                                                </CircularGaugeRanges>
                                                <CircularGaugePointers>
                                                    <CircularGaugePointer PointerWidth="1" Radius="70%" Value="@value">
                                                        <CircularGaugePointerBorder Width="2"></CircularGaugePointerBorder>
                                                        <CircularGaugeCap Radius="4">
                                                            <CircularGaugeCapBorder Width="0"></CircularGaugeCapBorder>
                                                            <CircularGaugeNeedleTail Length="20%">
                                                                <CircularGaugeNeedleTailBorder Width="2"></CircularGaugeNeedleTailBorder>
                                                            </CircularGaugeNeedleTail>
                                                            <CircularGaugePointerAnimation Enable="false" Duration="500"></CircularGaugePointerAnimation>
                                                        </CircularGaugeCap>
                                                    </CircularGaugePointer>
                                                </CircularGaugePointers>
                                                <CircularGaugeAnnotations>
                                                    <CircularGaugeAnnotation Angle="270" Radius="50%" ZIndex="1" Content="World"></CircularGaugeAnnotation>
                                                </CircularGaugeAnnotations>
                                            </CircularGaugeAxis>
                                        </CircularGaugeAxes>
                                    </SfCircularGauge>
                                </div>
                            </ContentTemplate>
                        </CircularGaugeAnnotation>
                        <CircularGaugeAnnotation Angle="90" Radius="40%" ZIndex="1">
                            <ContentTemplate>
                                <div id="gauge4" style="font-size:10px;">@dateTime</div>
                            </ContentTemplate>
                        </CircularGaugeAnnotation>
                        <CircularGaugeAnnotation Angle="360" Radius="50%" ZIndex="1">
                            <ContentTemplate>
                                <div id="gauge3" style="font-size:10px;">@dateContent</div>
                            </ContentTemplate>
                        </CircularGaugeAnnotation>
                    </CircularGaugeAnnotations>
                </CircularGaugeAxis>
            </CircularGaugeAxes>
        </SfCircularGauge>
    </div>

@code{
    SfCircularGauge subGaugeref;
    SfCircularGauge subGauge2ref;
    SfCircularGauge gaugeref;
    public double value = 0;
    System.Timers.Timer syncTimer1 = null;
    public string dateContent = DateTime.Now.ToShortDateString();
    public string dateTime = DateTime.Now.ToShortTimeString();    
    double hour = (DateTime.Now.Hour) + (((DateTime.Now.Minute) / 60) % 12);
    double minute = (((DateTime.Now.Minute) * 12) / 60) + (((DateTime.Now.Second) * 12) / 3600);
    double seconds = (DateTime.Now.Second) * 12 / 60;
    protected override void OnInitialized()
    {
        syncTimer1 = new System.Timers.Timer(1000);
        syncTimer1.Elapsed += this.pointerValueUpdate;
        syncTimer1.AutoReset = true;
        syncTimer1.Enabled = true;
    }
    void pointerValueUpdate(Object source, System.Timers.ElapsedEventArgs e)
    {
        double hour = (DateTime.Now.Hour) + (((DateTime.Now.Minute) / 60) % 12);
        double minute = (((DateTime.Now.Minute) * 12) / 60) + (((DateTime.Now.Second) * 12) / 3600);
        double seconds = (DateTime.Now.Second) * 12 / 60;
        dateContent = DateTime.Now.ToShortDateString();
        dateTime = DateTime.Now.ToShortTimeString(); 
        var pointervalue = value + 0.2;
        value = value + 0.1;      
        seconds = seconds == 0 ? 12 : seconds;        
        value = (value == 12) ? 0 : value;
        //gaugeref.SetAnnotationValue(0, 0, pointervalue.ToString());
        gaugeref.SetAnnotationValue(0, 2, dateTime);
        gaugeref.SetPointerValue(0, 0, hour);
        gaugeref.SetPointerValue(0, 1, minute);
        gaugeref.SetPointerValue(0, 2, seconds);
        subGaugeref.SetPointerValue(0, 0, minute);
        subGauge2ref.SetPointerValue(0, 0, seconds);
        subGauge2ref.SetAnnotationValue(0, 0, minute.ToString());
        subGaugeref.SetAnnotationValue(0, 0, minute.ToString());
    }
} -->